

Vue.component2('a_1_0_3_3_0_img', {  
    template: `
    <div >
    <div class="a_1_0_3_3_0_container">  
        <div class="a_1_0_3_3_0_image_wrapper">  
            <img :src="data.show_imgsrc" alt="Image">  
        </div>  
        <div class="a_1_0_3_3_0_span_wrapper">  
            <span  style="color:#bcbcbc">{{data.show_text1}}</span>  
        </div>  
        <div class="a_1_0_3_3_0_span_wrapper">
            <span style="color:#bcbcbc">{{data.show_text2}}</span>  
        </div>  
    </div>
    </div>
`,  
  data() {
      return {
        refresh:"1",
        data:{
            test:false,
            show_imgsrc:"",
            show_text1:"",
            show_text2:"",
        }
      };
  },
  watch:{
  },
  methods:{
    refresh_func:function(e){
        this.refresh=this.refresh=="2"?"1":"2";
    },
    handleMouseEnter() {  
        if(this.hover_flag==false){
            this.hover_flag=true; 
            this.style2=this.style2+`color:${this.data.hovercolor};`;
        }
      },  
      handleMouseLeave() {  
        if(this.hover_flag==true){
            this.hover_flag=false; 
            let style2="";
            for (let key in this.style){
                style2=style2+`${key}:${this.style[key]};`
            }
            this.style2=style2;
        }
      } ,
    setstyle2:function(name,value){
        this.style[name]=value;
        let style2="";
        for (let key in this.style){
            style2=style2+`${key}:${this.style[key]};`
        }
        this.style2=style2;
    },
    handleclick:function(){
try{this.data.click()}
catch{}
    }
  },
  mounted:function(){
    if(_this.deepcopy_data.test==true){
        _this.data.show_imgsrc="python.png";
        _this.data.show_text1="用户1-基础组件-控件";
        _this.data.show_text2="文本显示框(a0)";

    }
} }
);

Vue.component2('a_1_0_3_3_0', {  
    template: `
    <div class="a_1_0_3_3_0_father_container" v-show="data.show_flag">  
    <div class="a_1_0_3_3_0_title">
    <div style="padding-left:20px;color:#bcbcbc">后端组件库</div>
    </div>
        <div class="row a_1_0_3_3_0_row"style="margin:0":key="refresh">
            <a_1_0_3_3_0_img class="col-sm-4 col-md-3 col-lg-2 col-6"v-for="(item,indexr) in data.lst" :key="indexr" :deepcopy_data="item"></a_1_0_3_3_0_img>
        </div>
    <div class="a_1_0_3_3_0_page">
          <el-pagination
@current-change="handleCurrentChange"
  small
  layout="prev, pager, next"
  :page-size="num"
  :total="total">
</el-pagination>

    </div>
    </div>
`,  
  data() {
      return {
        num:18,//一页显示10张图片
        total:0,
        false:false,
        true:true,
        refresh:"1",
        data:{
            show_flag:true,
            test:false,
            lst:[],
            url:'',//请求的url
            request:'',
        }
      };
  },
  watch:{
    'data.url':function(e){
        console.log("更新url")
        this.data.request=request______({method:'post',url:e});
        console.log("发起请求")
        this.get_info({"page":0});
    }
  },
  methods:{
    refresh_func:function(e){
        this.refresh=this.refresh=="2"?"1":"2";
    },
    //选择分页
    handleCurrentChange:function(page){
        this.get_info({
            page:page
        })
    },
    //发送请求获取数据
    get_info:function(obj){
        let num=obj.num||this.num;//分页数量
        let page=obj.page;//查询第几页 的页码  【0为第一页
        try{
            this.data.request({
                body_data:{"num":Number(num),"page":Number(page)-1},
                execute_lst:[
                    {
                        type:'func',
                        func:this.update_data,
                        args:['received_data']
                    }
                ]
            })
            
        console.log("等待服务端处理请求完成")
        }catch{}
    },
    
    //接收到查询数据后显示查询的数据
    update_data:function(received_data){
        // {
        //     "type": "success",
        //     "data": {
        //         "data": [
        //             {
        //                 "id": 1,
        //                 "path": "2-1-1-3",
        //                 "user_id": "2",
        //                 "dir1_id": "1",
        //                 "dir2_id": "1",
        //                 "temp_id": "3",
        //                 "version": "0",
        //                 "temp_name": "None"
        //             },
        //             {
        //                 "id": 2,
        //                 "path": "2-1-1-4",
        //                 "user_id": "2",
        //                 "dir1_id": "1",
        //                 "dir2_id": "1",
        //                 "temp_id": "4",
        //                 "version": "0",
        //                 "temp_name": "None"
        //             },
        //             {
        //                 "id": 3,
        //                 "path": "2-1-1-5",
        //                 "user_id": "2",
        //                 "dir1_id": "1",
        //                 "dir2_id": "1",
        //                 "temp_id": "5",
        //                 "version": "0",
        //                 "temp_name": "测试"
        //             }
        //         ],
        //         "count": 3
        //     }
        // }
        let data=received_data.data.data;
        this.total=received_data.data.count;
        let new_lst=[];
        console.log("datalst",data,data.length)
        for (let i=0;i<data.length;i++){
            let item=data[i];
            new_lst.push({
            show_imgsrc:"/static_base/python.png",
            show_text1:`${item.path}`,
            show_text2:`${item.temp_name}(${item.version})`,
            })
        }
        this.data.lst=new_lst;
        console.log("新数据",this.data.lst)
        this.refresh_func();
        console.log("接收请求数据",received_data)
    }
  },
  mounted:function(){
    if(_this.deepcopy_data.test==true){
        let item={
            show_imgsrc:"python.png",
            "show_text1":"用户1-基础组件-控件",
            "show_text2":"文本显示框(a0)",
        }
        let lst=[];
        for (let i=0;i<100;i++){
            lst.push(JSON.parse(JSON.stringify(item)));
        }
        _this.data.lst=lst;
        _this.data.url="/select_temp2";
        _this.refresh_func();
    }
} }
);